/// 页面 * 表格

<template>
  <Page>
    <VxeGrid ref="gridRef" v-bind="gridOptions">
      <template #toolbar_buttons>
        <vxe-button @click="gridOptions.align = 'left'">
          居左
        </vxe-button>
        <vxe-button @click="gridOptions.align = 'center'">
          居中
        </vxe-button>
        <vxe-button @click="gridOptions.align = 'right'">
          居右
        </vxe-button>
      </template>
    </VxeGrid>

    <button @click="getData">
      Get Data
    </button>
  </Page>
</template>

<script setup lang="tsx">
import type { VxeGridInstance, VxeGridProps } from 'vxe-table'
import type { RowData } from './types'
import { rowsData } from './helper'

const gridRef = ref<VxeGridInstance<RowData>>()
const gridOptions = reactive<VxeGridProps<RowData>>({
  border: true,
  height: 300,
  align: null,
  keepSource: true,
  columnConfig: {
    resizable: true,
  },
  columns: [
    { type: 'seq', width: 50 },
    { field: 'name', title: 'name', editRender: { name: 'VxeInput' } },
    { field: 'sex', title: 'sex' },
    { field: 'address', title: 'Address' },
  ],
  toolbarConfig: {
    slots: {
      buttons: 'toolbar_buttons',
    },
  },
  data: rowsData,

  editConfig: {
    trigger: 'click',
    mode: 'cell',
    showStatus: true,
    enabled: true,
  },
  editRules: {
    name: [
      { required: true, message: '请输入名称' },
      {
        validator({ cellValue }) {
          // 模拟服务端校验
          return new Promise((resolve, reject) => {
            setTimeout(() => {
              if (cellValue && (cellValue.length < 3 || cellValue.length > 50)) {
                reject(new Error('名称长度在 3 到 50 个字符之间'))
              }
              else {
                resolve()
              }
            }, 100)
          })
        },
      },
    ],
  },
})

const getData = () => {
  console.log(
    gridRef.value?.getData(),
  )
}
</script>

<style scoped lang="scss">

</style>
